<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>类式组件</title>
</head>

<body>
  <div id="test"></div>
</body>

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script type="text/babel">

  class Index1 extends React.Component {

    state = {
      ipt1value: ''
    }
    btnClick1 = () => {
      console.log(this);
      let ipt1 = this.refs.ipt1.value
      console.log(ipt1);

      this.setState({
        ipt1value: ipt1
      })
    }
    render() {
      return (
        <div>
          <h1>this is react page...!</h1>
          <button onClick={this.btnClick1}>BTN</button>

          <div className="box">
            <input ref="ipt1" type="text" placeholder="点击获取数据" />
          </div>
          <h2>{this.state.ipt1value}</h2>
        </div>
      )
    }
  }

  // function sum(...n) {
  //     return n.reduce((n1, n2) => {
  //         return n1 + n2
  //     })
  // }

  // console.log(sum(1,2,3,4,5));

  // function handleClick2() {
  //     // let ipt1 = this.refs.ipt1
  //     // console.log(ipt1.value);
  // }
  // function handleClick3(){
  //     // let ipt2 = this.refs.ipt2
  //     // console.log(ipt2.value);
  // }

  // function btnClick1() {
  //     console.log('click...')
  // }

  ReactDOM.createRoot(document.getElementById('test')).render(<Index1 />)

</script>

</html>